<template>
  <div style="padding: 40px;">
  <el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
    height="800"
  >
    <el-table-column
      prop="createid"
      label="生产编号"
      width="120"
      align="center"
    />
    <el-table-column prop="vname" label="疫苗名称" width="210" align="center" />
    <el-table-column label="疫苗等级" width="140" align="center">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>类别: {{ scope.row.vsort }}</div>
            <div>供应商: {{ scope.row.maker }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.vrank }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="vsort" label="疫苗类别" width="150" align="center">
      <template #default="scope">
        <el-tag type="warning" disable-transitions>{{
          scope.row.vsort
        }}</el-tag>
      </template>
    </el-table-column>
  
    <el-table-column
      prop="vsum"
      label="采购入库数"
      width="140"
      align="center"
    />
    <el-table-column
      prop="vsurplus"
      sortable
      label="库存剩余数"
      width="130"
      align="center"
    >
      <template #default="scope">
        <el-tag type="info" disable-transitions effect="dark">{{
          scope.row.vsurplus
        }}</el-tag>
      </template>
    </el-table-column>
    
    <el-table-column fixed="right" label="操作" width="220" align="center">
      <template #default="scope">
        <el-button type="danger" size="small" @click="subtract(scope.row)"
          >库存-1</el-button
        >
        <el-button type="primary" plain size="small"  @click="tosaveData(scope.row)">修改</el-button>
        
      </template>
    </el-table-column>
  </el-table>
 <!-- 编辑或者添加的弹窗 -->
 <el-dialog title="疫苗信息" v-model="dialogFormVisible" width="60%">
      <el-form :model="form" size="default" :rules="rules" ref="form">

        <el-row>
          <el-col :span="7"
            ><el-form-item
              label="采购入库数量"
              label-width="120px"
              prop="vsum"
            >
              <!-- <el-input
                v-model="form.vsum"
                autocomplete="off"
              ></el-input> -->
              <el-input-number
                v-model="form.vsum"
                :min="1"
                controls-position="right"
                size="large"
                @change="handleChange"
              />
               </el-form-item
          ></el-col>
          <el-col :span="7"
            ><el-form-item
              label="库存剩余数量"
              label-width="120px"
              prop="vsurplus"
            >
              <!-- <el-input
                v-model="form.vsurplus"
                autocomplete="off"
              ></el-input> -->
              <el-input-number
                v-model="form.vsurplus"
                :min="1"
                controls-position="right"
                size="large"
                @change="handleChange"
              />
               </el-form-item
          ></el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false"> 取消</el-button>
          <el-button type="primary" @click="saveData('form')"> 确认</el-button>
        </span>
      </template>
    </el-dialog>
</div>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "Vaccinreservation",

  data() {
    return {
      tableData:[],
      form: {
        // id:0,
        // vsurplus: 0,
      }, //添加或者修改的数据
      dialogFormVisible: false,
    };
  },
  methods: {
    tosaveData(row){
      this.form = row;
      this.dialogFormVisible = true;
    },
    subtract(row) {
      this.form = row;
      this.form.vsurplus = this.form.vsurplus - 1;
      this.saveData();
    },
    //分页所有疫苗编号和名称查询
    getvoccinAll() {
      this.$http
        .get("/inoculations/vaccin/pageall", {
          params: {
            pageNum: 1,
            pageSize: 50,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.total = res.data.total;
            this.tableData = res.data.records;
            console.log(res.data.records);
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    //用于数据的添加和更新
    saveData() {
      this.$http
        .post("/inoculations/vaccin/save", this.form)
        .then((res) => {
          if (res.statusCode == "200") {
            ElMessage({
              message: "成功",
              type: "success",
            });
           this.getvoccinAll();
           this.dialogFormVisible = false;
            
          }
        })
        .catch(() => {
          ElMessage.error("失败！");
        });
    },
  },
  created() {
    this. getvoccinAll();
  }
};
</script>


<style>

</style>